import DocCardBox from "@/components/doc-card"
import React from "react"
import { Demo, demoJson } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "default",
        hash: "ipt-l-demo1",
        coms: [<Demo key={0} label="基本使用" />],
        comsJson: [demoJson('label="基本使用"')],
        desc: [{ text: "ipt_1_1_1" }]
    },
    {
        titleKey: "disabled",
        hash: "ipt-l-demo2",
        coms: [<Demo key={0} label="禁用" disabled={true} />],
        comsJson: [demoJson('label="禁用" disabled')]
    },
    {
        titleKey: "standard-textarea",
        hash: "ipt-l-demo3",
        coms: [<Demo key={0} type="textarea" mode="standard" label="文本域" />],
        comsJson: [demoJson('type="textarea" mode="standard" label="文本域"')],
        desc: [{ text: "ipt_2_1_1" }]
    },
    {
        titleKey: "password",
        hash: "ipt-l-demo4",
        coms: [<Demo key={0} type="password" label="请输入密码" />],
        comsJson: [demoJson('type="password" label="请输入密码"')],
        desc: [{ text: "ipt_3_1_1" }]
    }
]

const rightList = [
    {
        titleKey: "readonly",
        hash: "ipt-r-demo1",
        coms: [<Demo key={0} label="只读" readOnly={true} />],
        comsJson: [demoJson('label="只读" readOnly')]
    },
    {
        titleKey: "standard",
        hash: "ipt-r-demo2",
        coms: [<Demo key={0} mode="standard" label="下边框风格" />],
        comsJson: [demoJson('mode="standard" label="下边框风格"')],
        desc: [{ text: "ipt_4_1_1" }]
    },
    {
        titleKey: "size",
        hash: "ipt-r-demo3",
        coms: [<Demo key={0} size="small" label="小尺寸" />],
        comsJson: [demoJson('size="small" label="小尺寸"')],
        desc: [{ text: "ipt_5_1_1" }]
    },
    {
        titleKey: "最大长度",
        hash: "ipt-r-demo4",
        coms: [<Demo key={0} showMaxlength maxLength={12} label="最大长度" />],
        comsJson: [demoJson('showMaxlength maxLength={12} label="最大长度"')],
        desc: [{ text: "ipt_6_1_1" }]
    }
]

function InputDoc() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "InputProps",
            data: [
                {
                    schema: "value",
                    type: "string | number",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_ipt_1")
                },
                {
                    schema: "defaultValue",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_ipt_2")
                },
                {
                    schema: "label",
                    type: "ReactNode",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_ipt_3")
                },
                {
                    schema: "disabled",
                    type: "boolean",
                    defaultValue: "false",
                    isRequire: t("no"),
                    desc: t("disabled")
                },
                {
                    schema: "readOnly",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("readOnly")
                },
                {
                    schema: "placeholder",
                    type: "string",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_6")
                },
                {
                    schema: "type",
                    type: "InputType",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_7")
                },
                {
                    schema: "mode",
                    type: "InputMode",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_8")
                },
                {
                    schema: "rows",
                    type: "number",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_9")
                },
                {
                    schema: "resize",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_10")
                },
                {
                    schema: "autosize",
                    type: "boolean | { maxHeight: number; minHeight: number }",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_11")
                },
                {
                    schema: "size",
                    type: "ComponentSize",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_12")
                },
                {
                    schema: "bordered",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_13")
                },
                {
                    schema: "error",
                    type: "string",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_14")
                },
                {
                    schema: "allowClear",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_15")
                },
                {
                    schema: "showMaxlength",
                    type: "boolean | ((len?: number, maxlen?: number) => ReactNode)",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_16")
                },
                {
                    schema: "autoFocus",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("auto_focus")
                },
                {
                    schema: "autoComplete",
                    type: "string",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("auto_complete")
                },
                {
                    schema: "maxLength",
                    type: "number",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_19")
                },
                {
                    schema: "prefix",
                    type: "ReactNode",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_20")
                },
                {
                    schema: "suffix",
                    type: "ReactNode",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_21")
                },
                {
                    schema: "passwordIcon",
                    type: "ReactElement",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_22")
                },
                {
                    schema: "formatter",
                    type: "(v: string | number) => (string | number)",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_23")
                },
                {
                    schema: "onClick",
                    type: "DivMouseType",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("click_event")
                },
                {
                    schema: "onClear",
                    type: "() => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("clear")
                },
                {
                    schema: "onBlur",
                    type: "(e?: any) => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("blur_event")
                },
                {
                    schema: "onFocus",
                    type: "() => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("focus_event")
                },
                {
                    schema: "onMouseDown",
                    type: "(e?: any) => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("mousedown_event")
                },
                {
                    schema: "onTouchStart",
                    type: "DivTouchType",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("touch_event")
                },
                {
                    schema: "onChange",
                    type: "(e) => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("change_event")
                },
                {
                    schema: "classNames",
                    type: "InputClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ipt_25")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Input" desc="inputDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default InputDoc
